<template>
  <div class="theme-demo">
    <el-card>
      <template #header>
        <h2>主题功能演示</h2>
      </template>
      
      <div class="demo-section">
        <h3>当前主题信息</h3>
        <p>主题模式: {{ themeConfig.mode }}</p>
        <p>实际主题: {{ currentTheme }}</p>
        <p>主色调: {{ themeConfig.colors.primary }}</p>
      </div>

      <div class="demo-section">
        <h3>快捷操作</h3>
        <el-space wrap>
          <el-button type="primary" @click="toggleTheme">切换主题</el-button>
          <el-button type="success">成功按钮</el-button>
          <el-button type="warning">警告按钮</el-button>
          <el-button type="danger">危险按钮</el-button>
          <el-button type="info">信息按钮</el-button>
        </el-space>
      </div>

      <div class="demo-section">
        <h3>颜色展示</h3>
        <div class="color-grid">
          <div 
            v-for="(color, key) in themeConfig.colors" 
            :key="key"
            class="color-item"
            :style="{ backgroundColor: color }"
          >
            <span>{{ key }}</span>
            <small>{{ color }}</small>
          </div>
        </div>
      </div>

      <div class="demo-section">
        <h3>表单组件</h3>
        <el-form :model="form" label-width="80px">
          <el-form-item label="输入框">
            <el-input v-model="form.input" placeholder="请输入内容" />
          </el-form-item>
          <el-form-item label="选择器">
            <el-select v-model="form.select" placeholder="请选择">
              <el-option label="选项1" value="1" />
              <el-option label="选项2" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="开关">
            <el-switch v-model="form.switch" />
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useTheme } from '@/utils/useTheme'

const { themeConfig, currentTheme, toggleTheme } = useTheme()

const form = reactive({
  input: '',
  select: '',
  switch: false
})
</script>

<style scoped lang="scss">
.theme-demo {
  padding: 20px;

  .demo-section {
    margin-bottom: 24px;
    
    h3 {
      margin-bottom: 12px;
      color: var(--text-color-primary);
    }
    
    p {
      margin-bottom: 8px;
      color: var(--text-color-regular);
    }
  }

  .color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;

    .color-item {
      padding: 16px;
      border-radius: 8px;
      text-align: center;
      color: white;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

      span {
        display: block;
        font-weight: bold;
        margin-bottom: 4px;
        text-transform: capitalize;
      }

      small {
        font-size: 12px;
        opacity: 0.9;
      }
    }
  }
}
</style>
